<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            box-sizing: border-box;
            padding: 0px;
            margin: 0px;
        }
        .banner{
            position: absolute;
            top: 0px;
            bottom: 0px;
            right: 0px;
            left: 0px;
            margin: auto auto;
            display: flex;
            flex-direction: column;
            width: 604px;
            height: 342px;
            overflow: hidden;
        }
        .banner>.imgList{
            height: 298px;
            width:4000px;
            /*transform: translateX(-604px);*/

        }
        .banner>.tabControl{
            flex: 1;
            display: flex;
            background-color: black;
        }
        .banner>.tabControl>.item{
            display: flex;
            flex: 1;
            justify-content: center;
            align-items: center;
            color:#B1B2BE ;
        }
        .banner>.tabControl>.item>a{

            text-decoration: none;

        }
        .banner>.tabControl>.active{
            cursor: pointer;
            color: #F3C258;
            background-color: #FFFFFF26;
        }


    </style>
</head>
<body>
    <div class="banner">
        <div class="imgList">
            <img src="./img/banner_05.jpeg" alt=""><img src="./img/banner_04.jpeg" alt=""><img src="./img/banner_03.jpeg" alt=""><img src="./img/banner_02.jpeg" alt=""><img src="./img/banner_01.jpeg" alt="">
        </div>
        <div class="tabControl">
            <div class="item active">场景票选结果</div>
            <div class="item">高校联赛总决赛</div>
            <div class="item">大招已经好了</div>
            <div class="item">女子公开赛</div>
            <div class="item">王者萌萌假日</div>
        </div>
    </div>
    <script>
        const tabControlEl = document.querySelector('.tabControl')
        const imgListEl = document.querySelector('.imgList')
        let activeEl = document.querySelector('.active')
        const itemEls = document.querySelectorAll('.item')
        let imgIndex = 0;
        tabControlEl.addEventListener('mouseover',(event)=>{
            if(event.target.classList.contains('item')){
                /*取消定时器*/
                clearInterval(timer)
                /*拿到当前hover的tab的数组中的位置*/
                let index = Array.from(itemEls).findIndex(item=>item===event.target)
                imgIndex = index
                /*调用图片轮播函数*/
                switchBanner()
            }
        })
        /*自动图片轮播*/
        let timer = undefined
        const autoBanner = ()=>{
            timer=setInterval(()=>{
                imgIndex++;
                if(imgIndex>=itemEls.length){
                    imgIndex=0
                }
                /*调用图片轮播函数*/
                switchBanner()
            },2000)
        }
        autoBanner()
        /*鼠标离开*/
        tabControlEl.addEventListener('mouseout',(event)=>{
            if(event.target.classList.contains('item')){
                /*拿到当前hover的tab的数组中的位置*/
                let index = Array.from(itemEls).findIndex(item=>item===event.target)
                imgIndex = index
                /*调用自动轮播函数*/
                autoBanner()
            }
        })
        /*封装图片轮播函数*/
        const switchBanner = ()=>{
            imgListEl.style.transform=`translateX(${-604*imgIndex}px)`
            imgListEl.style.transition=`transform 400ms linear`
            /*处理下面tabControl的自动轮播  思路：取消之前的active类 新增active类*/
            activeEl.classList.remove('active')
            tabControlEl.children[imgIndex].classList.add('active')
            /*记录新的activeEl 类*/
            activeEl=tabControlEl.children[imgIndex]
        }
    </script>
</body>
</html>